<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="商城名称">
                <a-input placeholder="请输入商城名称" v-model="queryParam.name" allowClear></a-input>
              </a-form-item>
            </a-col>

            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="代理商">
                <a-select placeholder="请选择" v-model="queryParam.admin_id" allowClear>
                  <a-select-option :value="item.id" v-for="item of admin" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->

            <a-col :md="8" :sm="24">
              <a-form-item label="业务员">
                <div class="flex">
                  <a-select class="select" placeholder="请选择" v-model="queryParam.salesman_id" allowClear>
                    <a-select-option :value="item.id" v-for="item of salesman" :key="item.id">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>

                  <a-button type="primary" @click="getList()">查询</a-button>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card
      :bordered="false"
      :bodyStyle="{
        marginTop: '24px',
      }"
    >
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.status" @change="getList()">
          <a-radio-button :value="-1"> 全部 </a-radio-button>
          <a-radio-button :value="0"> 未绑定 </a-radio-button>
          <a-radio-button :value="1"> 已绑定 </a-radio-button>
        </a-radio-group>
      </div>

      <a-table
        :rowKey="
          (r, i) => {
            return r.report_id
          }
        "
        size="default"
        :columns="columns"
        :data-source="list"
        :scroll="{ x: 'max-content' }"
        :pagination="{
          page: this.queryParam.page,
          total: this.total,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
      >
        <div slot="content" slot-scope="text, record">
          <div class="content">
            <div class="img">
              <a-avatar shape="square" :size="48" icon="user" :src="record.logo" />
            </div>

            <div class="txt">
              <h3>{{ record.name }}</h3>
              <p>{{ record.mobile }}</p>
            </div>
          </div>
        </div>

        <span slot="status" slot-scope="text, record">
          <div class="status">
            <span :class="getStatus(text)[0]"></span>
            <span>{{ getStatus(text)[1] }}</span>
          </div>
        </span>

        <span slot="action" slot-scope="text, record">
          <template v-if="record.status === 0">
            <a-button type="link" :disabled="record.is_single_store == '1'" size="small" @click="change(record.id)"
              >更换业务员</a-button
            >
            <a-divider type="vertical" />
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;" @click="handleItem(1, record)">同意</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="handleItem(2, record)">拒绝</a>
                </a-menu-item>
              </a-menu>
              <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
            </a-dropdown>
          </template>
        </span>
      </a-table>
    </a-card>

    <a-modal
      title="更换业务员"
      :width="500"
      :confirm-loading="modalLoading"
      :mask-closable="false"
      :destroy-on-close="true"
      v-model="visible"
      @ok="submitForm"
      @cancel="clearForm"
    >
      <a-form-model
        ref="coordinateForm"
        :rules="rules"
        :model="form"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 18 }"
      >
        <a-form-model-item label="业务员" prop="salesman_id">
          <a-select class="select" placeholder="请选择" v-model="form.salesman_id" allowClear>
            <a-select-option :value="item.id" v-for="item of salesman" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <a-modal
      title="审核"
      :width="500"
      :confirm-loading="modalLoading"
      :mask-closable="false"
      :destroy-on-close="true"
      v-model="visible2"
      @ok="submitForm2"
      @cancel="clearForm"
    >
      <a-form-model
        ref="coordinateForm2"
        :rules="rules2"
        :model="form2"
        :labelCol="{ span: 4 }"
        :wrapperCol="{ span: 18 }"
      >
        <a-form-model-item label="店铺类型" prop="business_model">
          <a-select class="select" placeholder="请选择" v-model="form2.business_model" allowClear>
            <a-select-option :value="1">独立运营</a-select-option>
            <a-select-option :value="2">平台运营</a-select-option>
            <a-select-option :value="3">当面付</a-select-option>
            <a-select-option :value="4">点餐</a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="聚合码" prop="qrcode_id" v-if="form2.business_model">
          <a-select class="select" placeholder="请选择" v-model="form2.qrcode_id" allowClear>
            <a-select-option :value="item" v-for="item of codeList" :key="item">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { getAuditList, storeAudit, bindSalesman, getQrcode } from '@/api/store'
import { storeInit } from '@/api/saas/copy'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80,
  },
  {
    title: '店铺信息',
    scopedSlots: {
      customRender: 'content',
    },
    width: 300,
  },
  {
    title: '代理商',
    dataIndex: 'admin_name',
    scopedSlots: {
      customRender: 'admin_name',
    },
  },
  {
    title: '业务员',
    dataIndex: 'salesman',
    scopedSlots: {
      customRender: 'salesman',
    },
  },
  {
    title: '分类',
    dataIndex: 'category_name',
    scopedSlots: {
      customRender: 'category_name',
    },
    // ellipsis: true,
    // width: 300
  },

  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: {
      customRender: 'status',
    },
  },
  {
    title: '时间',
    dataIndex: 'created_at',
    // scopedSlots: {
    //   customRender: 'created_at'
    // },
    sorter: (a, b) => a.created_at - b.created_at,
    width: 200,
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  components: {},

  computed: {
    getStatus() {
      return (status) => {
        let arr = []

        switch (status) {
          case 0:
            arr = ['disabled', '申请中']
            break

          case 1:
            arr = ['open', '通过']
            break

          default:
            arr = ['close', '拒绝']
            break
        }

        return arr
      }
    },
  },

  data() {
    return {
      columns,
      // 查询参数
      queryParam: {
        name: undefined,
        // admin_id: undefined,
        salesman_id: undefined,
        status: -1,
      },

      visible: false,

      rules: {
        salesman_id: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      form: {
        salesman_id: undefined,
      },

      visible2: false,
      rules2: {
        business_model: [{ required: true, message: '请选择', trigger: 'change' }],
        qrcode_id: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      form2: {
        business_model: undefined,
        qrcode_id: undefined,
      },
      modalLoading: false,

      admin: [],
      salesman: [],

      codeList: [],

      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      item: null,
      previewImage: undefined,
    }
  },

  watch: {
    'form2.business_model'(business_model) {
      getQrcode({
        business_model,
      }).then((res) => {
        this.codeList = res.data || []
        this.form2.qrcode_id = ''
      })
    },
  },

  methods: {
    // 获取数据列表
    async getList(pageNo = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { queryParam, pageSize } = this

      const res = await getAuditList({
        ...queryParam,
        pageSize,
        pageNo,
      })
      if (res.code == 0) {
        this.selectedRowKeys = []
        let { totalCount, data, admin, salesman } = res.data
        this.total = totalCount
        this.list = data
        this.salesman = salesman
        this.admin = admin
      }
      hide()
    },

    // 分页请求
    tablePageChange(e) {
      this.getList(e)
    },

    // 同意拒绝
    changeStatus(data) {
      storeAudit(data).then(async (res) => {
        this.modalLoading = false

        if (res.code !== 0) {
          this.$error({
            content: res.msg,
          })
        } else {
          this.$message.success(res.msg)
          this.modalLoading = false
          this.visible2 = false
          this.getList()

          if (data.status === 1) {
            const res2 = await storeInit({
              id: res.store.id,
            })
            console.log('res2,', res2)
          }
        }
      })
    },

    // 点击单个
    handleItem(status, item) {
      if (item.is_single_store === '1') {
        if (status === 1) {
          this.$confirm({
            content: '确定同意吗？',
            onOk: () => {
              this.changeStatus({ status, id: item.id })
            },
          })
        } else {
          this.changeStatus({ status, id: item.id })
        }
      } else {
        if (status === 1) {
          this.form2.id = item.id
          this.form2.status = status
          this.visible2 = true
          return
        }

        this.changeStatus({ status, id: item.id })
      }
    },

    change(id) {
      this.visible = true
      this.form.id = id
    },

    clearForm() {
      this.$refs.coordinateForm.resetFields()
      this.$refs.coordinateForm2.resetFields()
    },

    // 表单提交
    submitForm2() {
      this.$refs.coordinateForm2.validate((valid) => {
        if (valid) {
          this.modalLoading = true

          let { form2 } = this

          this.changeStatus(form2)
        }
      })
    },

    // 表单提交
    submitForm() {
      this.$refs.coordinateForm.validate((valid) => {
        if (valid) {
          this.modalLoading = true

          let { form } = this
          bindSalesman(form)
            .then((res) => {
              this.modalLoading = false

              if (res.code !== 0) {
                this.$error({
                  content: res.msg,
                })
              } else {
                this.getList()
                this.$message.success('更换业务员成功')
                this.visible = false
              }
            })
            .catch((err) => {
              this.$message.error(err.message)
              this.modalLoading = false
            })
        }
      })
    },
  },

  mounted() {
    this.getList()
  },
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  align-items: center;
  height: 48px;
  max-width: 300px;
  overflow: hidden;

  .txt {
    margin-left: 16px;
    flex: 1;
    overflow: hidden;

    * {
      margin: 0;
      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    h3 {
      color: rgba(0, 0, 0, 0.85);
    }

    p {
      color: rgba(0, 0, 0, 0.45);
    }
  }
}

/* .report_desc {
  width: 300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
} */

.flex {
  display: flex;

  .select {
    flex: 1;
    overflow: hidden;

    ::v-deep {
      .ant-select-selection {
        width: 100%;
      }
    }
  }
}

.status {
  display: flex;
  align-items: center;

  span:nth-child(1) {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
  }

  .close {
    background-color: #ff4400;
  }
  .disabled {
    background-color: #ccc;
  }
  .open {
    background-color: #65c817;
  }
}
</style>
